<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../css/utils/bootstrap.min.css" />
    <link rel="stylesheet" href="../../css/utils/common.css" />
    <link rel="stylesheet" href="../../css/utils/bootstrap-datetimepicker.css" />
    <link rel="stylesheet" href="../../css/utils/toastr.min.css" />
	<title></title>
	<style>
		.label-container {
			display: block;
		    justify-content: normal;
		    margin-top: 30px;
		    margin-bottom: 30px;
		}
		.label-content {
			margin-top: 0px;
			margin-bottom: 10px;
		}
		.uiwm-sub-nav {
		    padding-top: 15px;
		    padding-bottom: 10px;
		    text-align: center;
		}
		.uiwm-sub-nav .uiwm-sub-nav-wrapper {
		    width: 30%;
		    display: inline-block;
		    text-align: center;
		    position: relative;
		}
		.iconfont {
		    font-family: "iconfont" !important;
		    font-size: 16px;
		    font-style: normal;
		    -webkit-font-smoothing: antialiased;
		    -webkit-text-stroke-width: 0.2px;
		    -moz-osx-font-smoothing: grayscale;
		}
		.uiwm-sub-nav i {
		    font-size: 25px;
		}
		.uiwm-sub-nav-wrapper span {
			font-size: 14px;
			color: #333333;
			font-family: "MicrosoftYaHei";
		}
		.num span{
			font-size: 16px;
			color: #636363;
			font-family: "MicrosoftYaHei";
		}
		.icon-shuxi:before {
		    content: url(../../img/myClients/shuxikehu_icon.png);
		}
		.icon-renshi:before {
		    content: url(../../img/myClients/renshikehu_icon.png);
		}
		.icon-xiansuo:before {
		    content: url(../../img/myClients/xiansuokehu_icon.png);
		}
		.search-content {
		    display: inline-block;
		    width: 278px;
		    height: 32px;
		    background: url(../../img/myClients/search_input_bg.png);
		    background-size: 100% 100%;
		}
		/*------------select下拉菜单------------*/
		.select-group {
			width: 900px;
			height: 35px;
		}
		.filter-box0 {
			position: relative;
			float: right;
			width: 150px;
		}
		.filter-box1 {
			margin-right: 15px;
			position: relative;
			float: right;
			width: 150px;
		}
		.filter-label {
			float: right;
			margin-top: 8px;
		}
		/*------------select下拉菜单------------*/
		/*----------------全局搜索----------------*/
		.uiwm-filter {
		    background: #fff;
		    border-top: none;
		    padding: 20px 15px 15px;
		}
		.uiwm-filter label {
		    color: #666666;
		    font-weight: normal;
		    padding-right: 10px;
		    margin-top: 5px;
		    margin-bottom: 0;
		    float: left;
		}
		.v-m {
		    vertical-align: middle;
		}
		.col-sm-4 {
			width: 25%;
		}
		.m-b-xs {
			margin-bottom: 15px;
		}
		.filter-box {
		    width: 180px;
		    height: 32px;
		}
		.btn-primary:focus, .btn-primary:hover {
			color: #fff;
			background-color: #2aeee2;
			border-color: #2aeee2;
		}
		.btn-primary {
			padding: 6px 40px;
		    color: #fff;
		    background-color: #11B5AB;
		    border-color: #11B5AB;
		}
		/*----------------全局搜索----------------*/
		.add-or-edit {
			height: 600px;
		}
		.m-t-md {
		    margin-top: 30px;
		}
		.text-red {
		    color: #ee4747;
		}
		.btn-primary:focus, .btn-primary:hover {
			color: #fff;
			background-color: #2aeee2;
			border-color: #2aeee2;
		}
		.btn-primary {
			padding: 6px 40px;
		    color: #fff;
		    background-color: #11B5AB;
		    border-color: #11B5AB;
		}
		.cancle {
			color: #7B7B7B;
			background-color: #F3F3F3;
		    border-color: #F3F3F3;
		}
		.modal-header .title-tips-span {
			margin-left: 10px;
			font-size: 12px;
			font-family: "MicrosoftYaHei";
			color: #666666;
		}
		.modal-header .title-span {
			font-size: 15px;
			font-family: "MicrosoftYaHei-Bold";
			color: #666666;
		}
		.m-t-sm {
			margin-top: 20px;
			margin-bottom: 50px;
		}
		.customer-id {
			display: none;
		}
		.add-impression {
			padding-left: 0px;
		}
		.label-div {
			position: relative;
			display: inline-block;
			height: 20px;
		}
		.impression-label-group .label {
			display: inline-block;
			padding: 3px 15px;
			margin: 7px 10px 20px 0px;
			background-color: #E1E1E1;
			color: #848484;
			cursor: pointer;
			border-top-left-radius: 10px;
			border-top-right-radius: 10px;
			border-bottom-left-radius: 10px;
			border-bottom-right-radius: 10px;
		}
		.impression-label-group .label.active {
			background-color: #11B5AB;
			color: #fff;
		}
		.impression-label-group .del-span {
			cursor: pointer;
			position: absolute;
			right: 9px;
			top: 0px;
			font-size: 10px;
			opacity: 0;
		}
	</style>
</head>
<body>
	<div class="content">
		<div class="uiwm-sub-nav m-b-none">
            <div class="uiwm-sub-nav-wrapper">
                <div>
                    <i class="iconfont icon-shuxi"></i>
                </div>
                <div class="num">
                		<span id="familiar"></span>
                </div>
                <span>准客户：可以产生交易的用户</span>
            </div>
            <div class="uiwm-sub-nav-wrapper">
                <div>
                    <i class="iconfont icon-renshi"></i>
                </div>
                <div class="num">
                		<span id="know"></span>
                </div>
                <span>潜在合伙人：可以发展成为你的市场支撑的人</span>
            </div>
            <div class="uiwm-sub-nav-wrapper">
                <div>
                    <i class="iconfont icon-xiansuo"></i>
                </div>
                <div class="num">
                		<span id="clue"></span>
                </div>
                <span>普通客户：就是看过你广告的人</span>
            </div>
        </div>
		<div class="btn-group btn-group-justified btn-tab" role="group" aria-label="button-group">
			<div class="btn-group" role="group">
				<button type="button" panel-data="tab-panel1" data-id = "1" class="btn btn-default active">准客户</button>
			</div>
			<div class="btn-group" role="group">
				<button type="button" panel-data="tab-panel1" data-id = "2" class="btn btn-default">潜在合伙人</button>
			</div>
			<div class="btn-group" role="group">
				<button type="button" panel-data="tab-panel1" data-id = "3" class="btn btn-default">普通客户</button>
			</div>
			<div class="btn-group" role="group">
				<button type="button" panel-data="tab-panel4" data-id = "4" class="btn btn-default">全局搜索</button>
			</div>
		</div>
		<div class="tab-content">
			<div id="tab-panel1" class="tab-pane active">
				<div class="label-container">
					<div class="label-content">
						<div id="readnumLaebl" class="label-group">
							<label>阅读次数：</label>
							<span class="label label-default active unlimited" data-param="">不限</span>
							<span class="label label-default" data-param = "1">小于2次</span>
							<span class="label label-default" data-param = "2">2-5次</span>
							<span class="label label-default" data-param = "3">5-10次</span>
							<span class="label label-default" data-param = "4">10次以上</span>
						</div>
					</div>
					<div class="label-content">
						<div id="clientLaebl" class="label-group">
							<label>标签：</label>
							<span class="label label-default active unlimited">不限</span>
						</div>
						<div class="more-label">
							<a href="javascript:void(0)">更多标签</a>
							<img src="../../img/myExtension/more-down.png" />
						</div>
					</div>
					<div class="label-content">
						<div id="statusLaebl" class="label-group">
							<label>成交状态：</label>
							<span class="label label-default active unlimited" data-param="">不限</span>
							<span class="label label-default" data-param="1">初步沟通</span>
							<span class="label label-default" data-param="2">确认意识</span>
							<span class="label label-default" data-param="3">商务洽谈</span>
							<span class="label label-default" data-param="4">签约成交</span>
						</div>
					</div>
					<div class="select-group">
						<label>微信昵称：</label>
						<div class="search-content">
							<input type="search" id="searchInput" class="form-control" placeholder="请输入微信昵称">
						</div>
						<div class="filter-box0">
							<select id="employeesSt" class="form-control">
								<option value="none">--全部员工--</option>
							</select>
						</div>
						<div class="filter-box1">
							<select id="departmentSt" class="form-control">
								<option value="none">--全部部门--</option>
							</select>
						</div>
						<label class="filter-label">归属人员：</label>
					</div>
				</div>
		  		<table id="tab-panel1" class="table table-bordered table-hover table-striped">
					<thead>
						<tr>
							<th>序号</th>
							<th>昵称</th>
							<th>阅读次数</th>
							<th>最近阅读时间</th>
							<th>标签</th>
							<th>归属人</th>
							<th>归属部门</th>
							<th>成交状态</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody id="familiartbody">
					</tbody>
				</table>
				<nav id="familiarPage" class="text-center" aria-label="Page navigation">
					<ul class="pagination">
					</ul>
				</nav>
			</div>
			<div id="tab-panel4" class="tab-pane">
				<div class="uiwm-filter clearfix">
                    <div class="col-md-12 filter-hide row">
                    		<div class="form-inline col-sm-4 m-b-xs">
                            <label for="" class="v-m">微信昵称：</label>
                            <div class="input-group">
                                <input type="text" class="form-control input-sm no-shadow" id="searchWechatName" placeholder="请输入微信昵称">
                            </div>
                        </div>
	                    	<div class="col-sm-4 m-b-xs">
	                    		<label for="" class="v-m">开始时间：</label>
	                    		<div class="input-group">
                                <input type="text" class="form-control input-sm no-shadow" id="cusStartTime" placeholder="请输入开始时间">
                            </div>
	                    	</div>
	                    	<div class="col-sm-4 m-b-xs">
	                    		<label for="" class="v-m">结束时间：</label>
	                    		<div class="input-group">
                                <input type="text" class="form-control input-sm no-shadow" id="cusEndTime" placeholder="请输入结束时间">
                            </div>
	                    	</div>
	                    	<div class="col-sm-4 m-b-xs">
	                    		<label for="" class="v-m">活动名称：</label>
	                    		<select id="taskSt" class="form-control" style="width: 50%;">
								<option value="">--请选择活动--</option>
							</select>
	                    	</div>
                    </div>
                    <div class="col-md-12 filter-hide row">
	                    	<div class="form-inline col-sm-4 m-b-xs">
                            <label for="" class="v-m">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</label>
                            <div class="input-group">
                                <input type="text" class="form-control input-sm no-shadow" id="searchUserName" placeholder="请输入姓名">
                            </div>
                        </div>
                        <div class="form-inline col-sm-4 m-b-xs">
                            <label for="" class="v-m">电话号码：</label>
                            <div class="input-group">
                                <input type="text" class="form-control input-sm no-shadow" id="searchPhone" placeholder="请输入电话号码">
                            </div>
                        </div>
                        <div class="form-inline col-sm-4 m-b-xs" id="searchDiv">
                            <button class="btn btn-primary">确定</button>
                        </div>
                    </div>
                </div>
		  		<table class="table table-bordered table-hover table-striped">
					<thead>
						<tr>
							<th>序号</th>
							<th>昵称</th>
							<th>阅读次数</th>
							<th>最近阅读时间</th>
							<th>归属人</th>
							<th>归属部门</th>
							<th>成交状态</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody id="searchtbody">
					</tbody>
				</table>
				<nav id="searchPage" class="text-center" aria-label="Page navigation">
					<ul class="pagination">
					</ul>
				</nav>
			</div>
		</div>
		<div class="modal fade bs-example-modal-lg" id="editClientModal" tabindex="-1" role="dialog" aria-labelledby="editClientModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<span class="title-span">补全资料</span><span class="title-tips-span">当线索的电话和微信号录入后，系统会根据线索与您的关系转换成认识或熟悉</span>
					    	<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					</div>
				  	<div class="modal-body">
				  		<form class="form-horizontal m-t-md nice-validator n-default" id="editClientForm">
				            <div class="form-group">
				              <label for="recipient-name" class="control-label col-md-4"><!--<span class="text-red">*</span>--> 客户姓名：</label>
				              <div class="col-md-6 no-padder">
				                <input type="text" class="form-control" value="" name="username" id="username"  placeholder="请填写名片名称">
				                <input type="hidden" class="form-control" id="customerID">
				              </div>
				            </div>
				            <div class="form-group">
				              <label for="message-text" class="control-label col-md-4"> 年龄：</label>
				              <div class="col-md-6 no-padder">
				                <input type="text" class="form-control" v-model="mpname" name="age" id="age" placeholder="输入您的姓名" value="" >
				              </div>
				            </div>
				            <div class="form-group">
				              <label for="message-text" class="control-label col-md-4"> 请选择：</label>
				              <div class="col-md-6 no-padder">
					              <select id="numberSelect" class="form-control">
								  	<option value="1">手机号</option>
								  	<option value="2">微信号</option>
								  </select>
							  </div>
				            </div>
				            <div class="form-group">
				              <label for="message-text" class="control-label col-md-4"></label>
				              <div class="col-md-6 no-padder">
				                <input type="text" class="form-control" v-model="mptelephone" name="phone" id="phone"  placeholder="请输入正确的手机号码" value="">
				              </div>
				            </div>
				            <div class="form-group">
				              <label for="message-text" class="control-label col-md-4"><span class="text-red">*</span> 成交状态：</label>
				              <div class="col-md-6 no-padder">
				              	<select id="tradeStatusSelect" class="form-control">
								  	<option value="1">初步沟通</option>
									<option value="2">确认意向</option>
									<option value="3">商务洽谈</option>
									<option value="4">签约成交</option>
								</select>
				              </div>
				            </div>
				            <div class="form-group">
				              <label for="message-text" class="control-label col-md-4"><span class="text-red">*</span> 印象：</label>
				              <div class="col-md-4">
				                <input type="text" class="form-control" v-model="mpjobposition" name="note" id="note" placeholder="请输入印象标签">
				              </div>
				              <div class="col-md-2 add-impression">
				              	<button type="button" class="btn btn-default" id="impressionBtn">添加印象</button>
				              </div>
				            </div>
				            <div class="form-group" style="text-align: center;">
					            <div class="impression-label-group">
								</div>
							</div>
				            <div class="form-group">
				              <div class="col-md-offset-4 col-md-6 no-padder m-t-sm">
				              	<button id="cancle" class="btn btn-primary cancle" data-dismiss="modal" aria-label="Close">取消</button>
				                <button type="submit" id="save" class="btn btn-primary" >保存</button>
				              </div>
				            </div>
				         </form>
				  	</div>
				</div>
			</div>
		</div>
	</div>
	
	<script type="text/javascript" src="../../js/utils/jquery-1.12.4.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/bootstrap.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/bootstrap-datetimepicker.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/bootstrap-datetimepicker.fr.js" ></script>
	<script type="text/javascript" src="../../js/utils/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
	<script type="text/javascript" src="../../js/utils/jquery.validate.min.js"></script>
	<script type="text/javascript" src="../../js/utils/jquery.cookie.js" ></script>
	<script type="text/javascript" src="../../js/utils/page.js" ></script>
	<script type="text/javascript" src="../../js/utils/boot.js" ></script>
	<script type="text/javascript" src="../../js/utils/toastr.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/depart.js" ></script>
	<script>
		var userID = $.cookie("userID");
		var companyID = $.cookie("companyID");
		var tempPageNo = 1, tempSearchPageNo = 1;
		var tempCustomerLable,tempTradeStatusLable,tempReadNumLable,tempDepartID,tempEmployeesID,tempNickName,tempType=1,customerImpressionID;
		$(function() {
			toastr.options = {
                "closeButton": true,
                "timeOut": 2000,
                "positionClass": "toast-center"
            };
            base.postData(base.url.getMyLableList, {userID:userID,companyID:companyID}, callbackGetMyLableList);
//          base.postData(base.url.getDepartList, {userID:userID,companyID:companyID}, callbackGetDepartList);
            base.postData(base.url.getDepartAndEmployeeList, {userID:userID,companyID:companyID}, callbackGetDepartAndEmployeeList);
			getFamiliarCustomerList();
		})
		//标签返回
		function callbackGetMyLableList(data) {
			if (data.success) {
				var lableList = data.context.lableList;
				var html = '<label>标签：</label>'+
						   '<span class="label label-default active unlimited" data-param="">不限</span>';
				for (var i=0; i<lableList.length; i++) {
					html += '<span class="label label-default" data-param="'+lableList[i].id+'">'+lableList[i].lableName+'</span>';
				}
				$("#clientLaebl").html(html);
			}
		}
		function callbackGetDepartAndEmployeeList(data) {
			if (data.success) {
				var departList = data.context.departList;
				//获得部门下拉框对象
		        var departmentSt = document.getElementById("departmentSt");
		        //遍历部门数据,并把部门的数据追加到option选项中
		        for (var i=0; i<departList.length; i++) {
		            var option = document.createElement("option");
		            option.value = departList[i].departID;
		            option.innerHTML = departList[i].departName;
		            departmentSt.appendChild(option);
		        }
		        //部门下拉框发生改变事件
				departmentSt.onchange = function() {
					//获取当前点击对象的值
					var _departID = this.value;
					tempDepartID = _departID;
					var _employeeList = [];
					for (var i=0; i<departList.length; i++) {
						if (_departID == departList[i].departID) {
							_employeeList = departList[i].employeeList;
						}
					}
					//获得员工下拉框对象
					var employeesSt = document.getElementById("employeesSt");
					//每次点击部门后,员工初始化,避免高级重复追加
					employeesSt.innerHTML = "<option value='none'>--全部员工--</option>";
					//遍历员工数据,并取出员工数据,追加到员工对象中
					for (var i=0; i<_employeeList.length; i++) {
					    var option = document.createElement("option");
				        option.innerHTML = _employeeList[i].userName;
				        option.value = _employeeList[i].employeeID;
				        employeesSt.appendChild(option);
				    }
					employeesSt.onchange = function() {
						var _employeesID = this.value;
						tempEmployeesID = _employeesID;
						tempPageNo = 1;
						getFamiliarCustomerList();
					}
				}
			}
		}
		//部门返回
//		function callbackGetDepartList(data) {
//			if (data.success) {
//				//把获取的部门树形结构数据转换成数组
//				var departList = getDepartList(data.context.parentList);
//				//获得部门下拉框对象
//		        var departmentSt = document.getElementById("departmentSt");
//		        //遍历部门数据,并把部门的数据追加到option选项中
//		        for (var i=0; i<departList.length; i++) {
//		            var option = document.createElement("option");
//		            option.value = departList[i].sectionID;
//		            option.innerHTML = departList[i].sectionName;
//		            departmentSt.appendChild(option);
//		        }
//				//部门下拉框发生改变事件
//				departmentSt.onchange = function() {
//					//获取当前点击对象的值
//					var _departID = this.value;
//					tempDepartID = _departID;
//					base.postData(base.url.getEmployeeList, {userID:userID,companyID:companyID,departID:_departID}, function (data) {
//						if (data.success) {
//							var _employeeList = data.context.employeeList;
//							//获得员工下拉框对象
//							var employeesSt = document.getElementById("employeesSt");
//							//每次点击部门后,员工初始化,避免高级重复追加
//							employeesSt.innerHTML = "<option value='none'>--全部员工--</option>";
//							//遍历员工数据,并取出员工数据,追加到员工对象中
//							for (var i=0; i<_employeeList.length; i++) {
//							    var option = document.createElement("option");
//						        option.innerHTML = _employeeList[i].userName;
//						        option.value = _employeeList[i].employeeID;
//						        employeesSt.appendChild(option);
//						    }
//							employeesSt.onchange = function() {
//								var _employeesID = this.value;
//								tempEmployeesID = _employeesID;
//								tempPageNo = 1;
//								getFamiliarCustomerList();
//							}
//						}
//					});
//				}
//			}
//		}
		//熟悉客户
		function getFamiliarCustomerList() {
			var data = {
				type:tempType, // 1、熟悉客户 2、认识客户 3、线索客户
				readNum:tempReadNumLable,
				customerLableID:tempCustomerLable,
				tradeStatus:tempTradeStatusLable,
				userID:userID,
				pageNo:tempPageNo,
				nickName:tempNickName,
				departID:tempDepartID,
				employeesID:tempEmployeesID,
				companyID:companyID
			}
			base.postData(base.url.familiarCustomerList, data, callbackGetFamiliarList);
		}
		function callbackGetFamiliarList(data) {
			if (data.success) {
				if (tempPageNo == 1) {
					var _totalPage = Math.ceil(data.context.totalPage/10)||1;
					//初始化分页
					var page = {
						pageIndex:1,//初始页
						currentPage:1,//当前页
						showPage:5,//显示页数
						totalPage:_totalPage,//总页数
						onPageClick: function(page) {
							tempPageNo = page.currentPage;
							getFamiliarCustomerList();
							$("#familiarPage").initPage(page);
			    			return false;  //默认的翻页事件
					    }
					};
				}
				$("#familiarPage").initPage(page);
				$("#familiar").text(data.context.familiarCustomerNum);
				$("#know").text(data.context.knowCustomerNum);
				$("#clue").text(data.context.clueCustomerNum);
				$("#familiartbody").html(getListHtml(data.context.familiarCustomerList));
			}
		}
		function getListHtml (list) {
			var html = '';
			for (var index in list) {
				html += '<tr>'
				html += '	<td>'+(index*1+1)+'</td>'
				html += '	<td>'+list[index].nickName+'</td>'
				html += '	<td>'+list[index].readNum+'</td>'
				html += '	<td>'+list[index].lastReadTime+'</td>'
				html += '	<td>'+list[index].lableName+'</td>'
				html += '	<td>'+list[index].userName+'</td>'
				html += '	<td>'+list[index].depart+'</td>'
				html += '	<td>'+((list[index].tradeStatus==1)?"初步沟通":(list[index].tradeStatus==2)?"确认意向":(list[index].tradeStatus==3)?"商务洽谈":(list[index].tradeStatus==4)?"签约成交":"初步沟通")+'</td>'
				html += '	<td><button class="btn btn-default editClient" data-customerID = "'+list[index].customerID+'">客户编辑</button><button class="btn btn-default detail" data-customerID = "'+list[index].customerID+'">客户详情</button></td>'
				html += '</tr>'
			}
			return html;
		}
		//客户全局搜索
		function searchCustomerInfo() {
			var _taskID = $('#taskSt option:selected').val();
			var data = {
				nickName:$("#searchWechatName").val(), // 1、熟悉客户 2、认识客户 3、线索客户
				startTime:$("#cusStartTime").val(),
				endTime:$("#cusEndTime").val(),
				userName:$("#searchUserName").val(),
				phone:$("#searchPhone").val(),
				pageNo:tempSearchPageNo,
				taskID:_taskID,
//				keyword:tempNickName,
				userID:userID,
				companyID:companyID
			}
			base.postData(base.url.searchCustomerInfo, data, callbackSearchCustomerInfo);
		}
		function callbackSearchCustomerInfo(data) {
			if (data.success) {
				if (tempSearchPageNo == 1) {
					var _totalPage = Math.ceil(data.context.totalPage/10)||1;
					//初始化分页
					var page = {
						pageIndex:1,//初始页
						currentPage:1,//当前页
						showPage:5,//显示页数
						totalPage:_totalPage,//总页数
						onPageClick: function(page) {
							tempSearchPageNo = page.currentPage;
							searchCustomerInfo();
							$("#searchPage").initPage(page);
			    			return false;  //默认的翻页事件
					    }
					};
				}
				$("#searchPage").initPage(page);
				$("#searchtbody").html(getSearchListHtml(data.context.dataList));
			}
		}
		function getSearchListHtml (list) {
			var html = '';
			for (var index in list) {
				html += '<tr>'
				html += '	<td>'+(index*1+1)+'</td>'
				html += '	<td>'+list[index].nickName+'</td>'
				html += '	<td>'+list[index].readNum+'</td>'
				html += '	<td>'+list[index].lastReadTime+'</td>'
				html += '	<td>'+list[index].userName+'</td>'
				html += '	<td>'+list[index].depart+'</td>'
				html += '	<td>'+((list[index].tradeStatus==1)?"初步沟通":(list[index].tradeStatus==2)?"确认意向":(list[index].tradeStatus==3)?"商务洽谈":"签约成交")+'</td>'
				html += '	<td><button class="btn btn-default editClient" data-customerID = "'+list[index].customerID+'">客户编辑</button><button class="btn btn-default detail" data-customerID = "'+list[index].customerID+'">客户详情</button></td>'
				html += '</tr>'
			}
			return html;
		}
		//日期选择
	    	$('#cusStartTime').datetimepicker({
			    format: 'yyyy-mm-dd',
			    language: 'zh-CN',
			    minView: 'month',
			    autoclose: true
			}).on("click", function(ev) {
			    $("#cusStartTime").datetimepicker("setEndDate", $("#cusEndTime").val());
			}).on("changeDate", function(ev) {
			    $("#cusEndTime").datetimepicker("setStartDate", $("#cusStartTime").val());
			    $('#cusEndTime').datetimepicker('show');
			});
			$('#cusEndTime').datetimepicker({
			    format: 'yyyy-mm-dd',
			    language: 'zh-CN',
			    minView: 'month',
			    autoclose: true
			}).on("click", function(ev) {
			    $("#cusEndTime").datetimepicker("setStartDate", $("#cusStartTime").val());
		});
		//编辑客户资料验证和提交
		$("#editClientForm").validate({
//		    rules: {
//		      	username: "required",
//		      	age:{
//              		required:true,
//              		digits:true
//		       	},
//		      	phone: "required"
//		    },
//		    messages: {
//		      	username: "客户姓名不能为空",
//		      	age:{
//	                required: "年龄不能为空",
//	                	digits:"请输入正确的年龄"
//	           	}, 
//		      	phone: "电话或微信不能为空"
//		    },
		    submitHandler: function() {
		    		var _numberSelect = $('#numberSelect option:selected').val();
		    		var _tradeStatusSelect = $('#tradeStatusSelect option:selected').val();
		    		var data = {
					customerID:$("#customerID").val(),
					userName:$("#username").val(),
					old:$("#age").val(),
					phone:$("#phone").val(),
					tradeStatus:_tradeStatusSelect,
					remark:$("#note").val(),
					type:_numberSelect
				}
				base.postData(base.url.completeCustomerInfo, data, callbackCompleteCustomerInfo);
		    }
		});
		function callbackCompleteCustomerInfo(data) {
			if (data.success) {
				toastr.success("保存资料成功");
				//重新初始化数据
				$("#username").val("");
				$("#age").val("");
				$("#phone").val("");
				$("#note").val("");
				$("#numberSelect option[value='1']").attr("selected", true); 
				$("#tradeStatusSelect option[value='1']").attr("selected", true); 
				$('#editClientModal').modal('hide');
			}
		}
		$(".btn-tab").on("click", "button", function(){
			$(".btn-tab button").removeClass("active");
			$(this).addClass("active");
			var panelId = $(this).attr("panel-data");
			var dataId = $(this).data("id");
			console.log(dataId);
			if (panelId == "tab-panel1") {
				tempPageNo = 1;
				if (dataId == 1) {
					tempType = 1;
				} else if (dataId == 2) {
					tempType = 2;
				} else {
					tempType = 3;
				}
				getFamiliarCustomerList();
			} else {
				getAllTask();
				searchCustomerInfo();
			}
			$(".tab-content .tab-pane").removeClass("active");
			$("#"+panelId).addClass("active");
		});
		//获取所有任务
		function getAllTask() {
			var data = {
				companyID:companyID,
				userID:userID
			}
			base.postData(base.url.getAllTask, data, callbackGetAllTask);
		}
		function callbackGetAllTask(data) {
			if (data.success) {
				var _taskList = data.context.taskList;
				var taskSt = document.getElementById("taskSt");
		        //遍历部门数据,并把部门的数据追加到option选项中
		        for (var i=0; i<_taskList.length; i++) {
		            var option = document.createElement("option");
		            option.value = _taskList[i].taskID;
		            option.innerHTML = _taskList[i].title;
		            taskSt.appendChild(option);
		        }
			}
		}
		$('div[id^="tab-panel"]').on("click", ".editClient", function(){
			$("#customerID").val($(this).attr("data-customerID"));
			getCustomerInfo($(this).attr("data-customerID"));
			getCustomerImpressionList($(this).attr("data-customerID"));
		});
		//获得客户补全的资料
		function getCustomerInfo(_customerID) {
			var data = {
				customerID:_customerID
			}
			base.postData(base.url.getCustomerInfo, data, callbackGetCustomerInfo);
		}
		function callbackGetCustomerInfo(data) {
			if (data.success) {
				if (data.context) {
					$("#username").val(data.context.userName);
					$("#age").val(data.context.old);
					$("#phone").val(data.context.phone);
					$('#numberSelect option[value='+(data.context.type||1)+']').attr("selected", true); 
					var tradeStatusSelect = document.getElementById("tradeStatusSelect");
					for (var i = 0; i < tradeStatusSelect.options.length; i++){  
				        if (tradeStatusSelect.options[i].value == data.context.tradeStatus){  
				            tradeStatusSelect.options[i].selected = true;  
				            break;  
				        }  
				   	}
				}
			}
			$("#editClientModal").modal("show");
		}
		function getCustomerImpressionList(_customerID) {
			var data = {
				customerID:_customerID
			}
			base.postData(base.url.getCustomerImpressionList, data, function(data) {
				var impressionList = data.context.customerImpressionList;
				var html = ''
				for (var i=0; i<impressionList.length; i++) {
					html += '<div class="label-div">';
					html += '	<span class="label label-default" data-param="'+impressionList[i].id+'">'+impressionList[i].impressionName+'</span>';
					html += '	<span class="del-span" data-param="'+impressionList[i].id+'">X</span>';
					html += '</div>';
				}
				$(".impression-label-group").html(html);
			});
		}
		$('div[id^="tab-panel"]').on("click", ".detail", function(){
			console.log($(this).attr("data-customerID"));
			var _customerID = $(this).attr("data-customerID");
			window.parent.location = "../index.html?path=myClient/clientDetails.html?customerID="+_customerID;
		});
		//更多标签
		$(".more-label").click(function(){
			if ($(this).find("img").attr("src").indexOf("more-down") != -1) {
				$(this).find("img").attr("src", "../../img/myExtension/more-up.png");
				$(".label-group").css("width", "1200px");
				$(".label-group").css("height", "auto");
			}else{
				$(this).find("img").attr("src", "../../img/myExtension/more-down.png");
				$(".label-group").css("width", "800px");
				$(".label-group").css("height", "29px");
			}
		});
		$("#clientLaebl").on("click", "span", function(){
			//正反选
			if ($(this).attr("class").indexOf("active") != -1) {
				$(this).removeClass("active");
			}else{
				$(this).addClass("active");
			}
			//不限和其他标签互换
			if ($(this).attr("class").indexOf("unlimited") == -1) {
				$(this).parent().find(".unlimited").removeClass("active");
				tempCustomerLable = "";
				var len = $("#clientLaebl").find("span.active").length;
				$("#clientLaebl").find("span.active").each(function(i){
					if (i == len - 1) {
						tempCustomerLable += $(this).attr("data-param");
					}else{
						tempCustomerLable += $(this).attr("data-param") + ",";	
					}
				});
				tempPageNo = 1;
				getFamiliarCustomerList();
			}else {
				$(this).siblings().removeClass("active");
				tempCustomerLable = "";
				if ($(this).attr("class").indexOf("active") != -1) {
					tempPageNo = 1;
					getFamiliarCustomerList();
				}
			}
		});
		//点击阅读次数
		$("#readnumLaebl").on("click", "span", function(){
			if ($(this).attr("class").indexOf("active") != -1) {
				return;
			}	
			$("#readnumLaebl span").removeClass("active");
			$(this).addClass("active");
			tempReadNumLable = $(this).attr("data-param");
			tempPageNo = 1;
			getFamiliarCustomerList();
		});
		//点击成交状态
		$("#statusLaebl").on("click", "span", function(){
			if ($(this).attr("class").indexOf("active") != -1) {
				return;
			}	
			$("#statusLaebl span").removeClass("active");
			$(this).addClass("active");
			tempTradeStatusLable = $(this).attr("data-param");
			tempPageNo = 1;
			getFamiliarCustomerList();
		});
		//搜索
		$('#searchInput').bind('keyup', function(event) {
			if (event.keyCode == "13") {
		　　　　//回车执行查询
				$(this).blur();
				tempNickName = $(this).val();
				tempPageNo = 1;
				getFamiliarCustomerList();
		　　	}
		});
		$("#searchDiv").on("click", "button", function() {
			tempSearchPageNo = 1;//初始化页码
			searchCustomerInfo();
		})
		//监听选择手机或微信的select，输入框提示语
		$("#numberSelect").change(function() {
			var _type = $(this).children('option:selected').val();
			$("#phone").attr('placeholder',_type == 1 ? '请输入正确的手机号码':'请输入正确的微信号');
		})
		$(".add-impression").on("click", "button", function() {
			var params = {
				customerImpressionID: customerImpressionID,
				impressionName: $("#note").val(),
				customerID: $("#customerID").val(),
			}
			base.postData(base.url.updateCustomerImpression, params, function(data) {
				if (data.success) {
					customerImpressionID = null;
					$("#note").val("");
					getCustomerImpressionList($("#customerID").val());
					toastr.success(data.msg);
				} else {
					toastr.error(data.msg);
				}
			});
		})
		$(".impression-label-group").on("click", ".label", function() {
			customerImpressionID = $(this).attr("data-param");
			var _impressionLableTagName = $(this).text();
			$("#note").val(_impressionLableTagName);
			$("#impressionBtn").text("修改印象");
		})
		$(".impression-label-group").on("click", ".del-span", function() {
			customerImpressionID = $(this).attr("data-param");
			base.postData(base.url.delCustomerImpression, {customerImpressionID: customerImpressionID}, function(data) {
				if (data.success) {
					getCustomerImpressionList($("#customerID").val());
					toastr.success(data.msg);
				} else {
					toastr.error(data.msg);
				}
			});
		})
		//鼠标悬浮
		$(".impression-label-group").on("mouseover mouseout", ".label-div", function(event){
			if(event.type == "mouseover"){
				//鼠标悬浮
				$(this).find(".del-span").css("opacity", "1");
			}else if(event.type == "mouseout"){
				//鼠标离开
				$(this).find(".del-span").css("opacity", "0");
			}
		});
	</script>
</body>
</html>
